<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #operationBeforeExtend="{ record }">
        <a-link
            v-auth="['admin:order:read']"
            @click="readAction(record.id)"
        ><icon-eye /> 查看</a-link>
        <a-link
            v-auth="['admin:order:operateAssignStaff']"
            @click="operateAssignStaffAction(record)"
            :disabled="record.status !== 1 || record.staff_id !== 0"
        ><icon-edit /> 分配员工</a-link>
      </template>
    </ma-crud>

    <read ref="readRef" :column="readColumns" />

    <ma-form-modal
        ref="operateAssignStaffRef"
        title="分配员工"
        :column="operateAssignStaffColumns"
        :submit="operateAssignStaffSubmit"
    />
  </div>
</template>
<script setup>
import {ref, reactive} from 'vue'
import order from '@/api/admin/order'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import Read from '@/components/read/index.vue'
import MaFormModal from '@/components/ma-form-modal/index.vue'

const crudRef = ref()


const numberOperation = (record, newValue, numberName) => {
  order.numberOperation({ id: record.id, numberName, numberValue: newValue }).then( res => {
    if (res.success) {
      Message.success(res.message)
      record[numberName] = newValue
    }
  }).catch( e => { console.log(e) } )
}


const switchStatus = (record, statusValue, statusName) => {
  order.changeStatus({ id: record.id, statusName, statusValue }).then( res => {
    if (res.success) {
      Message.success(res.message)
      record[statusName] = statusValue
    }
  }).catch( e => { console.log(e) } )
}


const options = reactive({
  id: 'order',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationColumnWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: order.getList,
  // recycleApi: order.getRecycleList,
  requestParams: { orderBy: ['id'], orderType: 'desc' },
  /*add: {
    show: true,
    api: order.save,
    auth: ['admin:order:save']
  },
  edit: {
    show: true,
    api: order.update,
    auth: ['admin:order:update']
  },
  delete: {
    show: true,
    api: order.deletes,
    auth: ['admin:order:delete'],
    realApi: order.realDeletes,
    realAuth: ['admin:order:realDeletes']
  },
  recovery: {
    show: true,
    api: order.recoverys,
    auth: ['admin:order:recovery']
  },
  import: {
    show: true,
    url: 'admin/order/import',
    templateUrl: 'admin/order/downloadTemplate',
    auth: ['admin:order:import']
  },*/
  export: {
    show: true,
    url: 'admin/order/export',
    auth: ['admin:order:export']
  }
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "用户昵称",
    dataIndex: "member.nickname",
    formType: "input",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入用户昵称"
    }
  },
  {
    title: "车辆ID",
    dataIndex: "car_id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入车辆ID"
    }
  },
  {
    title: "渠道ID",
    dataIndex: "channel_id",
    formType: "input",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入渠道ID"
    }
  },
  {
    title: "员工姓名",
    dataIndex: "staff.name",
    formType: "input",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入员工姓名"
    }
  },
  {
    title: "订单号",
    dataIndex: "no",
    formType: "input",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入订单号"
    }
  },
  {
    title: "城市",
    dataIndex: "city",
    formType: "input",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入城市"
    }
  },
  {
    title: "地址",
    dataIndex: "address",
    formType: "input",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入地址"
    }
  },
  {
    title: "开始时间",
    dataIndex: "start_at",
    formType: "range",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入开始时间"
    },
    showTime: true
  },
  {
    title: "结束时间",
    dataIndex: "end_at",
    formType: "range",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入结束时间"
    },
    showTime: true
  },
  {
    title: "租车天数",
    dataIndex: "day",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入租车天数"
    }
  },
  {
    title: "租车单价",
    dataIndex: "price",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入租车单价"
    }
  },
  {
    title: "清洁费",
    dataIndex: "cleaning_fee",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入清洁费"
    }
  },
  {
    title: "服务费",
    dataIndex: "service_fee",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入服务费"
    }
  },
  {
    title: "保险单价",
    dataIndex: "insurance_price",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入保险单价"
    }
  },
  {
    title: "总价格",
    dataIndex: "total_price",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入总价格"
    }
  },
  {
    title: "支付单号",
    dataIndex: "pay_no",
    formType: "input",
    search: true,
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入支付单号"
    }
  },
  {
    title: "支付发起时间",
    dataIndex: "pay_launch_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "支付确认时间",
    dataIndex: "pay_confirm_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "支付失效时间",
    dataIndex: "pay_lapse_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "支付状态",
    dataIndex: "pay_status",
    formType: "select",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入支付状态"
    },
    dict: {
      data: [
        {
          label: "未支付",
          value: "0"
        },
        {
          label: "支付中",
          value: "1"
        },
        {
          label: "付款成功",
          value: "2"
        }
      ],
      translation: true
    }
  },
  {
    title: "是否送达",
    dataIndex: "is_delivery",
    formType: "select",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入是否送达"
    },
    dict: {
      data: [
        {
          label: "否",
          value: "0"
        },
        {
          label: "是",
          value: "1"
        }
      ],
      translation: true
    }
  },
  {
    title: "送达时间",
    dataIndex: "delivery_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "取消时间",
    dataIndex: "cancelled_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "还车时间",
    dataIndex: "return_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "select",
    search: true,
    addDisplay: false,
    editDisplay: false,
    commonRules: {
      required: true,
      message: "请输入状态"
    },
    dict: {
      data: [
        {
          label: "待支付",
          value: "0"
        },
        {
          label: "进行中",
          value: "1"
        },
        {
          label: "已完成",
          value: "2"
        },
        {
          label: "已取消",
          value: "3"
        },
        {
          label: "已失效",
          value: "4"
        }
      ],
      translation: true
    }
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "range",
    search: true,
    addDisplay: false,
    editDisplay: false,
    showTime: true
  },
  {
    title: "",
    dataIndex: "updated_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: true
  }
])

const readRef = ref()
const readColumns = reactive([
  {
    title: "用户ID",
    dataIndex: "member_id",
    readonly: true,
    allowClear: false,
  },
  {
    title: "承租人信息",
    formType: "card",
    customClass: ['ml-10', 'mb-6'],
    formList: [
      {
        title: "姓名",
        dataIndex: "order_lessee.name",
        readonly: true,
        allowClear: false,
      },
      {
        title: "手机号",
        dataIndex: "order_lessee.phone",
        readonly: true,
        allowClear: false,
      },
      {
        title: "身份证",
        dataIndex: "order_lessee.id_card",
        readonly: true,
        allowClear: false,
      },
    ]
  },
  {
    title: "渠道ID",
    dataIndex: "channel_id",
    readonly: true,
    allowClear: false,
  },
  {
    title: "员工ID",
    dataIndex: "staff_id",
    readonly: true,
    allowClear: false,
  },
  {
    title: "订单号",
    dataIndex: "no",
    readonly: true,
    allowClear: false,
  },
  {
    title: "城市",
    dataIndex: "city",
    readonly: true,
    allowClear: false,
  },
  {
    title: "地址",
    dataIndex: "address",
    readonly: true,
    allowClear: false,
  },
  {
    title: "开始时间",
    dataIndex: "start_at",
    readonly: true,
    allowClear: false,
  },
  {
    title: "结束时间",
    dataIndex: "end_at",
    readonly: true,
    allowClear: false,
  },
  {
    title: "租车天数",
    dataIndex: "day",
    readonly: true,
    allowClear: false,
  },
  {
    title: "租车单价",
    dataIndex: "price",
    readonly: true,
    allowClear: false,
  },
  {
    title: "车辆信息",
    formType: "card",
    customClass: ['ml-10', 'mb-6'],
    formList: [
      {
        title: "封面图",
        dataIndex: "order_car.cover",
        formType: "upload",
        returnType: "url",
        disabled: true,
      },
      {
        title: "名称",
        dataIndex: "order_car.name",
        readonly: true,
        allowClear: false,
      },
      {
        title: "描述",
        dataIndex: "order_car.describe",
        readonly: true,
        allowClear: false,
      },
    ]
  },
  {
    title: "清洁费",
    dataIndex: "cleaning_fee",
    readonly: true,
    allowClear: false,
  },
  {
    title: "服务费",
    dataIndex: "service_fee",
    readonly: true,
    allowClear: false,
  },
  {
    title: "保险单价",
    dataIndex: "insurance_price",
    readonly: true,
    allowClear: false,
  },
  {
    title: "保险信息",
    formType: "card",
    customClass: ['ml-10', 'mb-6'],
    formList: [
      {
        title: "名称",
        dataIndex: "order_insurance.name",
        readonly: true,
        allowClear: false,
      },
      {
        title: "车损保障",
        dataIndex: "order_insurance.car_damage",
        readonly: true,
        allowClear: false,
      },
      {
        title: "三者保障",
        dataIndex: "order_insurance.tripartite",
        readonly: true,
        allowClear: false,
      },
      {
        title: "乘客保障",
        dataIndex: "order_insurance.passenger",
        readonly: true,
        allowClear: false,
      },
    ]
  },
  {
    title: "总价格",
    dataIndex: "total_price",
    readonly: true,
    allowClear: false,
  },
  {
    title: "支付单号",
    dataIndex: "pay_no",
    readonly: true,
    allowClear: false,
  },
  {
    title: "支付发起时间",
    dataIndex: "pay_launch_at",
    readonly: true,
    allowClear: false,
  },
  {
    title: "支付确认时间",
    dataIndex: "pay_confirm_at",
    readonly: true,
    allowClear: false,
  },
  {
    title: "支付失效时间",
    dataIndex: "pay_lapse_at",
    readonly: true,
    allowClear: false,
  },
  {
    title: "支付状态",
    dataIndex: "pay_status",
    formType: "select",
    disabled: true,
    allowClear: false,
    dict: {
      data: [
        {
          label: "未支付",
          value: "0"
        },
        {
          label: "支付中",
          value: "1"
        },
        {
          label: "付款成功",
          value: "2"
        }
      ],
      translation: true
    }
  },
  {
    title: "是否送达",
    dataIndex: "is_delivery",
    formType: "select",
    disabled: true,
    allowClear: false,
    dict: {
      data: [
        {
          label: "否",
          value: "0"
        },
        {
          label: "是",
          value: "1"
        }
      ],
      translation: true
    }
  },
  {
    title: "送达时间",
    dataIndex: "delivery_at",
    readonly: true,
    allowClear: false,
  },
  {
    title: "取消时间",
    dataIndex: "cancelled_at",
    readonly: true,
    allowClear: false,
  },
  {
    title: "还车时间",
    dataIndex: "return_at",
    readonly: true,
    allowClear: false,
  },
  {
    title: "状态",
    dataIndex: "status",
    formType: "select",
    disabled: true,
    allowClear: false,
    dict: {
      data: [
        {
          label: "待支付",
          value: "0"
        },
        {
          label: "进行中",
          value: "1"
        },
        {
          label: "已完成",
          value: "2"
        },
        {
          label: "已取消",
          value: "3"
        },
        {
          label: "已失效",
          value: "4"
        }
      ],
      translation: true
    }
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    readonly: true,
    allowClear: false,
  },
])
const readAction = async (id) => {
  const response = await order.read(id)
  if (response.success) {
    readRef.value.open(response.data)
  } else {
    Message.info(response.message)
  }
}

const operateAssignStaffRef = ref()
const operateAssignStaffColumns = reactive([
  {
    title: "订单号",
    dataIndex: "name",
    formType: "input",
    readonly: true,
    allowClear: false,
  },
  {
    title: "城市",
    dataIndex: "city",
    formType: "input",
    readonly: true,
    allowClear: false,
  },
  {
    title: "地址",
    dataIndex: "address",
    formType: "input",
    readonly: true,
    allowClear: false,
  },
  {
    title: "员工",
    dataIndex: "staff_id",
    formType: "select",
    rules: {
      required: true,
      message: "请选择员工"
    },
    dict: {
      url: "admin/staff/dict",
      props: {
        label: 'name',
        value: 'id'
      }
    },
  }
])
let operateAssignStaffRecord = ref()
const operateAssignStaffAction = async (record) => {
  operateAssignStaffRecord = record
  operateAssignStaffRef.value.open({
    id: record.id,
    no: record.no,
    city: record.city,
    address: record.address,
    staff_id: undefined,
  })
}
const operateAssignStaffSubmit = async (formData) => {
  const res = await order.operateAssignStaff(formData.id, formData)

  if (!res.success) {
    return false
  }

  operateAssignStaffRecord.staff_id = formData.staff_id
  Message.success(res.message)
}
</script>
<script> export default { name: 'admin:order' } </script>
